<script setup lang="ts">
import type { AreaOpus } from '@/types/micro-scene';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

defineProps<{
  opus: AreaOpus;
}>();

const handleDownload = async (url: string, fileName: string) => {
  try {
    // 显示加载提示
    message.loading('正在下载...', 0);

    // 获取文件内容
    const response = await fetch(url);
    const blob = await response.blob();

    // 获取文件扩展名
    const extension = url.split('.').pop()?.split('?')[0].toLowerCase() || '';

    // 创建新的 blob，强制设置 MIME 类型为 application/octet-stream
    const forceDownloadBlob = new Blob([blob], { type: 'application/octet-stream' });

    // 创建 blob URL
    const blobUrl = window.URL.createObjectURL(forceDownloadBlob);

    // 创建一个隐藏的 a 标签
    const link = document.createElement('a');
    link.href = blobUrl;
    // 添加文件扩展名到文件名
    link.download = `${fileName}.${extension}` || `下载文件.${extension}`;

    // 添加到 body 并触发点击
    document.body.appendChild(link);
    link.click();

    // 清理
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);

    // 关闭加载提示
    message.destroy();
    message.success('下载成功');
  }
  catch (error) {
    message.destroy();
    message.error('下载失败，请稍后重试');
    console.error('下载失败:', error);
  }
};
</script>

<template>
  <a-layout style="display: flex; flex-direction: column; border-radius: 0.5rem; background-color: white; padding: 0.5rem;" class="transition-transform duration-200 hover:shadow-lg hover:scale-95">
    <div style="display: flex; flex-direction: row; gap: 0.5rem;">
      <div style="width: 30%;">
        <img :src="opus.coverUrl" alt="作品封面" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem;">
      </div>

      <div style="width: 70%; display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="font-size: 1rem; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 1; overflow: hidden; line-height: 1.5rem;">{{ opus.opusTitle }}</span>
        </div>

        <a-flex wrap="wrap" style="height: 1.5rem; overflow-y: hidden; gap: 0.5rem; margin-top: 0.5rem;">
          <a-tag v-for="tag in opus.tags" :key="tag" style="margin-right: 0rem; border: none; background-color: #f0f0f0; color: #666; height: fit-content;">
            {{ tag }}
          </a-tag>
        </a-flex>

        <span style="font-size: 0.8rem; margin-top: 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; height: 3.5rem; line-height: 1.5;">{{ opus.introduction }}</span>

        <div v-if="opus.tags.length === 0" style="width: 100%; height: 1.5rem; background-color: transparent;" />

        <div class="flex flex-row justify-end gap-2 mt-2">
          <a-button
            type="primary"
            icon-placement="right"
            style="font-size: 14px;border: none;"
            @click="handleDownload(opus.opusUrl, opus.opusTitle)"
          >
            下载作品
            <DownloadOutlined />
          </a-button>
        </div>
      </div>
    </div>
  </a-layout>
</template>

<style scoped lang="scss">

</style>
